Bump to v31 #246

BSd3v · 2023-10-16T20:29:15Z

Reopening to go onto main since dev was deleted

- fixing breaking changes

…object of objects that need to be parsed. This may be predetermined or no, it needs to loop through the keys.

…tion when changing the size

AnnMarieW · 2023-12-02T21:42:51Z

Update - this example works now 🎉

I'm trying to get This example from the AG Grid docs working, but I'm not sure if I'm defining it wrong or if dataTypeDefinitions prop needs to have function enabled.


import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd


app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {"field": 'athlete'},
    {"field": 'age'},
    {"field": 'date'},
]
defaultColDef = {
      "filter": True,
      "floatingFilter": True,
      "editable": True,
}

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid-cell-data-types",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,
            dashGridOptions={"dataTypeDefinitions": {"function": "dataTypeDefinitions"}},
        ),
    ],
)

app.run(debug=True)



"""

dagfuncs.dataTypeDefinitions = {
      dateString: {
        baseDataType: 'dateString',
        extendsDataType: 'dateString',
        valueParser: (params) =>
          params.newValue != null &&
          params.newValue.match('\\d{2}/\\d{2}/\\d{4}')
            ? params.newValue
            : null,
        valueFormatter: (params) => (params.value == null ? '' : params.value),
        dataTypeMatcher: (value) =>
          typeof value === 'string' && !!value.match('\\d{2}/\\d{2}/\\d{4}'),
        dateParser: (value) => {
          if (value == null || value === '') {
            return undefined;
          }
          const dateParts = value.split('/');
          return dateParts.length === 3
            ? new Date(
                parseInt(dateParts[2]),
                parseInt(dateParts[1]) - 1,
                parseInt(dateParts[0])
              )
            : undefined;
        },
        dateFormatter: (value) => {
          if (value == null) {
            return undefined;
          }
          const date = String(value.getDate());
          const month = String(value.getMonth() + 1);
          return `${date.length === 1 ? '0' + date : date}/${
            month.length === 1 ? '0' + month : month
          }/${value.getFullYear()}`;
        },
      },
    };


"""

AnnMarieW · 2023-12-04T18:49:18Z

Is the date object cell data type applicable in Dash? If so, how would you use it?

Update - We are recommending not to use this with Dash since the Date Object is not JSON compatible.

AnnMarieW · 2023-12-07T23:57:34Z

Update - the issues described here have been fixed

There are a couple warning messages in the console in V31

AG Grid: Since v31, 'columnApi.getColumnState' is deprecated and moved to 'api.getColumnState'.

AG Grid: Since v31, 'columnApi.autoSizeAllColumns' is deprecated and moved to 'api.autoSizeAllColumns'.

I'm not sure which example is triggering this warning message:

AG Grid: Grid API function getColumnState() cannot be called as the grid has been destroyed.
It is recommended to remove local references to the grid api. Alternatively, check gridApi.isDestroyed() to avoid calling methods against a destroyed grid. To run logic when the grid is about to be destroyed use the gridPreDestroy event

… added a test for `gridApi?.isDestroyed()`

BSd3v · 2023-12-11T19:48:47Z

There are a couple warning messages in the console in V31

AG Grid: Since v31, 'columnApi.getColumnState' is deprecated and moved to 'api.getColumnState'.

AG Grid: Since v31, 'columnApi.autoSizeAllColumns' is deprecated and moved to 'api.autoSizeAllColumns'.

I'm not sure which example is triggering this warning message:

AG Grid: Grid API function getColumnState() cannot be called as the grid has been destroyed. It is recommended to remove local references to the grid api. Alternatively, check gridApi.isDestroyed() to avoid calling methods against a destroyed grid. To run logic when the grid is about to be destroyed use the gridPreDestroy event

I think I got these working, please check whatever was throwing these warnings.

…t was pointing to columns instead of the overall grid

…e function

…s wasnt working and opted for only the `GRID_MAYBE_FUNCTION_NO_PARAMS`

fixing for lint

Fixed conflicts

…allowing it be adjusted more timely without forcing the underlying grid to update

AnnMarieW · 2023-12-29T20:21:26Z

The example posted above now works 🎉

Update - the issue described below is a bug and reported on the AG Grid repo. Should be fixed in the next release 🎉 ag-grid/ag-grid#7398 (comment)

Now I'm trying to make it work with various date formats. For example, if you wanted to create custom cell data types and assign it to a column, it doesn't seem to work.

Note that in the example below, the custom cell data type for the percentage works, but the date does not.


import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd


app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {"field": 'athlete'},
    {"field": 'age', "cellDataType": "percentage"},
    {"field": 'date', "cellDataType": "dateString2"},
]
defaultColDef = {
      "filter": True,
      "floatingFilter": True,
      "editable": True,
}


app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid-cell-data-types",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            defaultColDef=defaultColDef,
            dashGridOptions={"dataTypeDefinitions": {'function': 'dataTypeDefinitions'}},
        ),
    ],
)

app.run(debug=True, port=5000)

"""

dagfuncs.dataTypeDefinitions = {
      dateString2: {
        baseDataType: 'dateString',
        extendsDataType: 'dateString',
        valueParser: (params) =>
          params.newValue != null &&
          params.newValue.match('\\d{2}/\\d{2}/\\d{4}')
            ? params.newValue
            : null,
        valueFormatter: (params) => (params.value == null ? '' : params.value),
        dataTypeMatcher: (value) =>
          typeof value === 'string' && !!value.match('\\d{2}/\\d{2}/\\d{4}'),
        dateParser: (value) => {
          if (value == null || value === '') {
            return undefined;
          }
          const dateParts = value.split('/');
          return dateParts.length === 3
            ? new Date(
                parseInt(dateParts[2]),
                parseInt(dateParts[1]) - 1,
                parseInt(dateParts[0])
              )
            : undefined;
        },
        dateFormatter: (value) => {
          if (value == null) {
            return undefined;
          }
          const date = String(value.getDate());
          const month = String(value.getMonth() + 1);
          return `${date.length === 1 ? '0' + date : date}/${
            month.length === 1 ? '0' + month : month
          }/${value.getFullYear()}`;
        },
      },
      percentage: {
            extendsDataType: 'number',
            baseDataType: 'number',
            valueFormatter: params => params.value == null
                ? ''
                : `${Math.round(params.value * 100)}%`,
        }
    };





"""

AnnMarieW · 2024-01-08T17:05:19Z

Update - Done 🎉

Could you please add:

import 'ag-grid-community/styles/ag-theme-quartz.css';

https://github.com/plotly/dash-ag-grid/blob/main/src/lib/fragments/AgGrid.react.js#L54

Add textFormatter and textMatcher in COLUMN_MAYBE_FUNCTIONS

… to be allowed to use as function

… bump-to-v30 # Conflicts: # src/lib/utils/propCategories.js

* converting looping through object to return a new object for `dataTypeDefinitions`

…er to COLUMN_MAYBE_FUNCTIONS

src/lib/components/AgGrid.react.js

src/lib/fragments/AgGrid.react.js

tests/assets/dashAgGridFunctions.js

alexcjohnson · 2024-01-23T02:13:16Z

package.json

@@ -1,6 +1,6 @@
 {
    "name": "dash-ag-grid",
-    "version": "2.4.0",
+    "version": "31.0.1rc3",


I'd prefer we not try to match the minor or patch version to AG Grid, just the major. That way we still have the flexibility to add features and fix bugs on our own schedule, we just have to hold breaking changes to align with upgrading the AG Grid major version. So the new release should be 31.0.0

@sdidier-dev - can you chime in here? This may affect how we link to the correct AG Grid version in the docs

Yes, I think we need to be in line about how we'll handle the dag version vs AG Grid version to know how to deal with the links to AG Grid docs: if they go to the last version of AG Grid docs or to an "archive" version of their docs.

This needs to be done in the docs itself, you cannot depend on our version, like @alexcjohnson, we need to have flexibility.

Maybe this becomes a map in the component, and we just update it there. Possibly a function that the user can run clientside as well that returns the underlying AG Grid version.

Actually that shouldn't be an issue for the links!
We took a look with Ann Marie, we're using the version of the ag grid package used in dag:
AG_grid_version = dag.package['dependencies']['ag-grid-community'].lstrip('^')
then compare it to the latest version of AG Grid coming from their github repo:
latest_tag_url = "https://api.github.com/repos/ag-grid/ag-grid/releases/latest"

So the version of dag can be anything that's should be fine for the links to AG Grid docs 🌈

@alexcjohnson,

What are your thoughts on being able to query the underlying grid version from the clientside? Or... could this just be done by searching the source code?

It would be handy have a utility -- maybe something like dag.get_grid_version()

I love the idea of a utility for this! Clientside seems most useful to me, because then you can run it as a viewer, not just an app developer, but we can do both if you like.

Co-authored-by: Alex Johnson <alex@plot.ly>

Adjusting Grid version due to unexpected token

…olumnSize` and `columnState` at the same time to the initial grid, `columnSize` trumps the `columnState`

…ery the grid version from python side

dash_ag_grid/__init__.py

Co-authored-by: Alex Johnson <alex@plot.ly>

…on, it will throw exception and alert the user for the error

…rst error, allowing it to check all 3 grid dependencies.

… same across the dependencies. This error will point to needing to disable the test if AG Grid becomes out of sync across the versions.

alexcjohnson

💃 Let's do it!!

…date for dag

BSd3v and others added 4 commits July 25, 2023 12:17

bumping AG Grid for v30

1c07dda

- fixing breaking changes

creation of a new propCategory for OBJ_MAP_MAYBE_FUNCTIONS, for an …

3d3ad3e

…object of objects that need to be parsed. This may be predetermined or no, it needs to loop through the keys.

Merge branch 'dev' into bump-to-v30

154a749

Merge branch 'main' into bump-to-v30

9dca9fa

alexcjohnson mentioned this pull request Oct 17, 2023

JS deps update 2023-10-16 #247

Merged

bumping to v31 and fixing failing test due to adjustment about pagina…

aa88127

…tion when changing the size

alexcjohnson changed the title ~~Bump to v30~~ Bump to v31 Nov 29, 2023

adjustments to the grid to remove the deprecated columnApi and also…

7e799e5

… added a test for `gridApi?.isDestroyed()`

BSd3v and others added 8 commits December 11, 2023 14:59

fixing for lint, also updating the note in the propcategories since i…

937d682

…t was pointing to columns instead of the overall grid

adjusting propCategories to support dataTypeDefinitions as a whol…

b1c4481

…e function

removing dataTypeDefinitions from OBJ_MAP_MAYBE_FUNCTIONS, as thi…

f4de823

…s wasnt working and opted for only the `GRID_MAYBE_FUNCTION_NO_PARAMS`

Update propCategories.js

15bcd81

fixing for lint

Merge branch 'cellValueChanged' into bump-to-v30

31dc118

Fixed conflicts

making pendingChanges a variable instead of the grid's state, this …

7d00c58

…allowing it be adjusted more timely without forcing the underlying grid to update

adjusting variable to be within the scope of the component

6865b68

fixing for linting

0104e87

Add textFormatter and textMatcher in COLUMN_MAYBE_FUNCTIONS

ea547cb

BSd3v and others added 7 commits January 8, 2024 12:18

Merge pull request #17 from sdidier-dev/bump-to-v30

35df0c3

Add textFormatter and textMatcher in COLUMN_MAYBE_FUNCTIONS

Add quartz theme, modify ag-grid version to 31.0.1 and add properties…

a9f5b9f

… to be allowed to use as function

run npm run format to fix linting

34a54e4

Merge pull request #18 from sdidier-dev/bump-to-v30

d29c62b

adjusting dataTypeDefinitions

93d42af

Merge branch 'bump-to-v30' of github.com:BSd3v/dash-ag-grid-real into…

ba9f77c

… bump-to-v30 # Conflicts: # src/lib/utils/propCategories.js

* fixing for linting issues

736ba69

* converting looping through object to return a new object for `dataTypeDefinitions`

Add dateParser, dateFormatter to use functions and move dataTypeMatch…

09550d5

…er to COLUMN_MAYBE_FUNCTIONS

alexcjohnson reviewed Jan 22, 2024

View reviewed changes

src/lib/components/AgGrid.react.js Show resolved Hide resolved

alexcjohnson reviewed Jan 22, 2024

View reviewed changes

src/lib/fragments/AgGrid.react.js Outdated Show resolved Hide resolved

alexcjohnson reviewed Jan 23, 2024

View reviewed changes

src/lib/fragments/AgGrid.react.js Outdated Show resolved Hide resolved

alexcjohnson reviewed Jan 23, 2024

View reviewed changes

tests/assets/dashAgGridFunctions.js Outdated Show resolved Hide resolved

alexcjohnson reviewed Jan 23, 2024

View reviewed changes

sdidier-dev and others added 12 commits January 23, 2024 14:10

Update examples and tests

07b40e8

Update src/lib/fragments/AgGrid.react.js

41f6e7e

Co-authored-by: Alex Johnson <alex@plot.ly>

Update src/lib/fragments/AgGrid.react.js

98fe5a5

Co-authored-by: Alex Johnson <alex@plot.ly>

Update tests/assets/dashAgGridFunctions.js

16f51d4

Co-authored-by: Alex Johnson <alex@plot.ly>

Merge branch 'bump-to-v30' into bump-to-v30

4191c3a

Merge pull request #19 from sdidier-dev/bump-to-v30

3ace197

Update package.json

d8bd19e

Adjusting Grid version due to unexpected token

Adjusting es post check to be 2017

ebcdcc2

changes perceived in underlying grid to make it so you cant pass a `c…

3fe32ab

…olumnSize` and `columnState` at the same time to the initial grid, `columnSize` trumps the `columnState`

adding 'get_grid_version' to python _init_ to allow developer to qu…

d903099

…ery the grid version from python side

Merge branch 'main' into bump-to-v30

bdb1de2

increasing no_output_timeout to 20m from the default of 10m

85f4221

alexcjohnson reviewed Feb 1, 2024

View reviewed changes

dash_ag_grid/__init__.py Outdated Show resolved Hide resolved

BSd3v and others added 5 commits February 1, 2024 12:44

Update dash_ag_grid/__init__.py

6b27a6b

Co-authored-by: Alex Johnson <alex@plot.ly>

updating build to test for a valid grid version, if not a valid versi…

1fd2438

…on, it will throw exception and alert the user for the error

adding test_version.py

53669e4

updating the test_version to be more robust and not break at the fi…

eac3655

…rst error, allowing it to check all 3 grid dependencies.

adjusting test_version.py to test the versions of AG Grid are the…

0dae37d

… same across the dependencies. This error will point to needing to disable the test if AG Grid becomes out of sync across the versions.

alexcjohnson approved these changes Feb 1, 2024

View reviewed changes

BSd3v added 4 commits February 1, 2024 16:47

updating changelog, adding test for dash_ag_grid.grid_version

7317629

updating test to not be hard coded

b44fce5

updating changelog

d4092de

adding bit about update of grid version and mentioning the version up…

5dc6d35

…date for dag

BSd3v merged commit a2b1334 into plotly:main Feb 1, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump to v31 #246

Bump to v31 #246

BSd3v commented Oct 16, 2023

AnnMarieW commented Dec 2, 2023 •

edited

Loading

AnnMarieW commented Dec 4, 2023 •

edited

Loading

AnnMarieW commented Dec 7, 2023 •

edited

Loading

BSd3v commented Dec 11, 2023

AnnMarieW commented Dec 29, 2023 •

edited

Loading

AnnMarieW commented Jan 8, 2024 •

edited

Loading

alexcjohnson Jan 23, 2024

AnnMarieW Jan 23, 2024

sdidier-dev Jan 23, 2024

BSd3v Jan 23, 2024

sdidier-dev Jan 23, 2024

BSd3v Jan 23, 2024

AnnMarieW Jan 23, 2024

alexcjohnson Jan 23, 2024

alexcjohnson left a comment

Bump to v31 #246

Bump to v31 #246

Conversation

BSd3v commented Oct 16, 2023

AnnMarieW commented Dec 2, 2023 • edited Loading

AnnMarieW commented Dec 4, 2023 • edited Loading

AnnMarieW commented Dec 7, 2023 • edited Loading

BSd3v commented Dec 11, 2023

AnnMarieW commented Dec 29, 2023 • edited Loading

AnnMarieW commented Jan 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson left a comment

Choose a reason for hiding this comment

AnnMarieW commented Dec 2, 2023 •

edited

Loading

AnnMarieW commented Dec 4, 2023 •

edited

Loading

AnnMarieW commented Dec 7, 2023 •

edited

Loading

AnnMarieW commented Dec 29, 2023 •

edited

Loading

AnnMarieW commented Jan 8, 2024 •

edited

Loading